<template>
	<view class="icongroup" :style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx ;background:' + mydata.content_bgcolor">
		<view
			class="containers"
			:style="
				'border-radius:' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.bottom +
					'rpx ' +
					mydata.radius.bottom +
					'rpx;'
			"
		>
			<view class="box_title" :style="'font-size:' + mydata.title.size * 2 + 'rpx;color:' + mydata.title.color">会员专属权益</view>
			<view class="box_content" >
				<view
					class="icongroup"
					v-if="mydata.style_type == 1"
					:style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx '"
				>
					<swiper :style="'height:' + (48 + mydata.width) * mydata.rows * 2 + 'rpx'" :autoplay="false" indicator-position="none">
						<swiper-item v-for="(item, index) in ctabs" :key="index">
							<view class="vip_bg" :style="'border-radius: 10rpx;background:'+mydata.bgcolor">
								<vcustomer :style="'width:' + 100 / mydata.num + '%;'" v-for="(item, i) in list[index]" :linkdata="item.linkdata">
									<view class="icon-item" :key="i" @click="Jumpurl()">
										<view class="icon-box"><vimage class="img_box" :style="bd" :src="item.icon"></vimage></view>
										<text class="title" :style="'color:' + mydata.textcolor + ';font-size:' + mydata.card_font_size * 2 + 'rpx;'">{{ item.text }}</text>
									</view>
								</vcustomer>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="cardgroup" v-if="mydata.style_type == 2">
					<swiper :style="'height:' + (58 + mydata.width) * mydata.rows * 2 + 'rpx'" :autoplay="false" indicator-position="none">
						<swiper-item v-for="(item, index) in ctabs" :key="index">
							<view class="vip_bg">
								<vcustomer :style="'width:' + 100 / mydata.num + '%;'" v-for="(item, i) in list[index]" :linkdata="item.linkdata">
									<view class="item-box">
										<view class="icon-item" :key="i" @click="Jumpurl()">
											<text class="title" :style="'color:' + item.card_color + ';font-size:' + mydata.card_font_size + 'px;'">{{ item.text }}</text>
											<view class="icon-box"><vimage class="img_box" :style="bd" :src="item.icon"></vimage></view>
										</view>
									</view>
								</vcustomer>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
import {mapState, mapMutations} from 'vuex';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			list: []
		};
	},
	mounted() {
		this.getlist();
	},
	computed: {
		//跑马灯面板数
		ctabs() {
			let n = 1;
			switch (this.mydata.rows) {
				case 1:
					//单行
					n = Math.ceil(this.mydata.list[0].length / this.mydata.num);
					break;
				case 2:
					//双行
					n = Math.ceil(this.mydata.list[0].length / (this.mydata.num * 2));
					break;
				default:
					break;
			}
			return n;
		},
		bd() {
			let s = 'width: ' + this.mydata.width * 2 + 'rpx; height: ' + this.mydata.width * 2 + 'rpx;';
			switch (this.mydata.type) {
				case 1:
					s = s + 'border-radius:0;';
					break;
				case 2:
					s = s + 'border-radius:20rpx;';
					break;
				case 3:
					s = s + 'border-radius:50%;';
					break;
				default:
					break;
			}
			return s;
		},
		...mapState({
			userInfo: state => state.userInfo
		})
	},
	methods: {
		getlist() {
			let list = [];
			let index = this.userInfo.level - 1;
			if (index < 0) {
				index = 0;
			}
			for (var i = 0; i < this.ctabs; i++) {
				let mlist = this.mydata.list[index].slice(0 + this.mydata.num * (i * this.mydata.rows), this.mydata.num * this.mydata.rows * (i + 1));

				list.push(mlist);
			}
			this.list = list;
		}
	}
};
</script>

<style lang="scss" scoped>
.box_title {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 40rpx;
	color: #121835;
}

.icongroup {
	.containers{
		overflow: hidden;
	}
	.vip_bg {
		display: flex;
		flex-wrap: wrap;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon-box {
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 32rpx 0 16rpx;

				.img_box {
					overflow: hidden;
				}

				.custom-icon {
					font-size: 56rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					flex-direction: column;
				}
			}

			.title {
				text-align: center;
				margin: 0 auto;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}
}

.cardgroup {
	.box_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #121835;
	}

	.vip_bg {
		display: flex;
		flex-wrap: wrap;

		.item-box {
			padding: 16rpx;

			.icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: cadetblue;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: #999 0 6rpx 10rpx;

				.icon-box {
					display: flex;
					flex-direction: column;
					position: relative;
					margin-top: 10rpx;
					padding: 0;

					.img_box {
						overflow: hidden;
					}

					.custom-icon {
						font-size: 56rpx;
						height: 56rpx;
						line-height: 56rpx;
						display: flex;
						flex-direction: column;
					}
				}

				.title {
					text-align: center;
					margin: 0 auto;
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}
	}
}
</style>
